import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import axios from "../axios/index";
import lcs from "../lc/cities.json";
import { IndexBar, Tabs, Cell } from "react-vant";

type Props = {};

const Site2 = (props: Props) => {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  const [data, setData] = useState([]);
  const [lc, setLc]: any = useState([]);

  useEffect(() => {
    (async () => {
      let res = await axios.get(
        "https://m.ly.com/trainbffapi/searchHotCity?mid=&pid=432&refId=478807627&traceId=T16819950604922841&ts=1681995076409&ver=1.0.0&abtkey=89d052c7-473a-4cd1-b1ae-b683984693b7&section=20&selectCity=1"
      );
      console.log(res.data.data.result);
      setList(res.data.data.result);
      setData(res.data.data.result);
    })();
    setLc(lcs.cityList);

  }, []);
  const aa = (e: any) => {
    console.log(e);
    let sou = data.filter((item: any, index) => {
      return item.name.includes(e.target.value);
    });
    setList(sou);
  };
  const dz = (item: any) => {
    // console.log(item)
    localStorage.setItem("dz2", item.name);
    navigate("/home/index");
  };
//楼层
const indexList = [];
const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10];
const charCodeOfA = "A".charCodeAt(0);

for (let i = 0; i < 26; i += 1) {
  indexList.push(String.fromCharCode(charCodeOfA + i));
}
const dian=(i:any)=>{
console.log(i)
localStorage.setItem('dz2',i.name)
navigate('/home/index')

}
  return (
    <div className="site">
    <div className="site_title">选择站点</div>
    <div className="site_input">
      <input type="text" onInput={aa} />
    </div>
    <div className="site_box">
      {list &&
        list.map((item: any, index) => {
          return (
            <div className="rm" key={index} onClick={() => dz(item)}>
              {item.name}
            </div>
          );
        })}
      <div className="cs">
        <Tabs>
          <Tabs.TabPane title="请选择城市">
            <IndexBar>
              {lc &&
                lc.map((item: any, index: any) => (
                  <div key={index}>
                    <IndexBar.Anchor index={item.title} />
                    {item.citys &&
                      item.citys.map((i: any, v: any) => {
                        return <Cell key={v} title={i.name} onClick={()=>dian(i)}></Cell>;
                      })}
                  </div>
                ))}
            </IndexBar>
          </Tabs.TabPane>
        </Tabs>
      </div>
    </div>
  </div>
  );
};

export default Site2;
